<template>
    <view class="mine-page">
      <!-- 用户信息卡片 -->
      <wd-cell-group>
        <wd-cell>
          <view class="user-info">
            <wd-img
              width="80px"
              height="80px"
              round
              :src="userInfo.avatar || '/static/default-avatar.png'"
            />
            <view class="info">
              <view class="nickname">{{ userInfo.nickname || '未登录' }}</view>
              <view class="id">ID: {{ userInfo.id || '--' }}</view>
            </view>
          </view>
        </wd-cell>
      </wd-cell-group>
  
      <!-- 功能菜单 -->
      <wd-cell-group custom-class="menu-group" title="常用功能">
        <wd-cell
          v-for="(item, index) in menuList"
          :key="index"
          :title="item.name"
          is-link
          :icon="item.icon"
          @click="handleMenuClick(item)"
        />
      </wd-cell-group>
  
      <!-- 系统设置 -->
      <wd-cell-group custom-class="menu-group" title="系统设置">
        <wd-cell title="清除缓存" is-link @click="handleClearCache" />
        <wd-cell title="关于我们" is-link @click="handleAbout" />
        <wd-cell title="退出登录" is-link @click="handleLogout" />
      </wd-cell-group>
    </view>
  </template>
  
  <script>
  export default {
    name: 'MinePage',
    data() {
      return {
        userInfo: {
          avatar: '',
          nickname: '',
          id: ''
        },
        menuList: [
          {
            name: '我的订单',
            icon: 'tickets',
            path: '/pages/order/index'
          },
          {
            name: '收货地址',
            icon: 'location',
            path: '/pages/address/index'
          },
          {
            name: '我的收藏',
            icon: 'star',
            path: '/pages/collect/index'
          }
        ]
      }
    },
    methods: {
      handleMenuClick(item) {
        uni.navigateTo({
          url: item.path
        })
      },
      handleClearCache() {
        uni.showModal({
          title: '提示',
          content: '确定要清除缓存吗？',
          success: (res) => {
            if (res.confirm) {
              // 清除缓存逻辑
              uni.showToast({
                title: '清除成功',
                icon: 'success'
              })
            }
          }
        })
      },
      handleAbout() {
        uni.navigateTo({
          url: '/pages/about/index'
        })
      },
      handleLogout() {
        uni.showModal({
          title: '提示',
          content: '确定要退出登录吗？',
          success: (res) => {
            if (res.confirm) {
              // 退出登录逻辑
            }
          }
        })
      }
    }
  }
  </script>
  
  <style lang="scss">
  .mine-page {
    min-height: 100vh;
    background-color: #f5f5f5;
    padding: 20rpx;
  }
  
  .user-info {
    display: flex;
    align-items: center;
    padding: 20rpx 0;
  
    .info {
      margin-left: 30rpx;
  
      .nickname {
        font-size: 32rpx;
        font-weight: bold;
        margin-bottom: 10rpx;
      }
  
      .id {
        font-size: 24rpx;
        color: #999;
      }
    }
  }
  
  .menu-group {
    margin-top: 20rpx;
  }
  </style>